<template>
    <h2>基础示例</h2>
    <div class="tw:flex tw:gap-2">
        <div class="tw:w-14 tw:flex-none tw:bg-pink-300 tw:rounded-md tw:h-8 tw:flex tw:justify-center tw:items-center">01</div>
        <div class="tw:w-64 tw:flex-1 tw:bg-pink-300 tw:rounded-md tw:h-8 tw:flex tw:justify-center tw:items-center">02</div>
        <div class="tw:w-32 tw:flex-1 tw:bg-pink-300 tw:rounded-md tw:h-8 tw:flex tw:justify-center tw:items-center">03</div>
    </div>
    <h2>flex-initial</h2>
    <div class="tw:flex tw:gap-2">
        <div class="tw:flex-none tw:w-14 tw:bg-blue-500 tw:h-8 tw:rounded-md tw:flex tw:justify-center tw:items-center">01</div>
        <div class="tw:flex-initial tw:w-64 tw:bg-blue-500 tw:h-8 tw:rounded-md tw:flex tw:justify-center tw:items-center">01</div>
        <div class="tw:flex-initial tw:w-32 tw:bg-blue-500 tw:h-8 tw:rounded-md tw:flex tw:justify-center tw:items-center">01</div>
    </div>
    <h2>flex-auto</h2>
    <div class="tw:flex tw:flex-row tw:gap-2">
        <div class="tw:flex-none tw:w-14 tw:bg-purple-500 tw:h-8 tw:rounded-md tw:flex tw:justify-center tw:items-center">01</div>
        <div class="tw:flex-auto tw:w-64 tw:bg-purple-500 tw:h-8 tw:rounded-md tw:flex tw:justify-center tw:items-center">01</div>
        <div class="tw:flex-auto tw:w-32 tw:bg-purple-500 tw:h-8 tw:rounded-md tw:flex tw:justify-center tw:items-center">01</div>
    </div>
</template>